<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <input type="hidden" name="id" value="{$row.id}">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Category_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-category_id" data-rule="required" data-source="categories/index" data-params='{"custom[status]":"1"}' class="form-control selectpage" name="row[category_id]" type="text" value="{$row.category_id|htmlentities}">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" value="{$row.name|htmlentities}">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">图片:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-image" class="form-control" size="50" name="row[image]" type="text" value="{$row.image|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span>
                        <button type="button" id="faupload-image" class="btn btn-danger faupload"
                                data-input-id="c-image"
                                data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp"
                                data-multiple="false"
                                data-preview-id="p-image">
                            <i class="fa fa-upload"></i> {:__('Upload')}
                        </button>
                    </span>
                </div>
                <span class="msg-box n-right" for="c-image"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-image"></ul>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Carousel')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-carousel" class="form-control" size="50" name="row[carousel]" type="text" value="{$row.carousel|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span>
                        <button type="button" id="faupload-carousel" class="btn btn-danger faupload"
                                data-input-id="c-carousel"
                                data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp,video/mp4,video/x-m4v,video/*"
                                data-multiple="true"
                                data-preview-id="p-carousel">
                            <i class="fa fa-upload"></i> {:__('Upload')}
                        </button>
                    </span>
                </div>
                <span class="msg-box n-right" for="c-carousel"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-carousel"></ul>
        </div>
    </div>

    <!-- 视频部分 -->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">视频:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-video_url" class="form-control" size="50" name="row[video_url]" type="text" value="{$row.video_url|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span>
                        <button type="button" id="faupload-video" class="btn btn-danger faupload"
                                data-input-id="c-video_url"
                                data-mimetype="video/mp4,video/x-m4v,video/*"
                                data-multiple="true"
                                data-preview-id="p-video_url">
                            <i class="fa fa-upload"></i> {:__('Upload')}
                        </button>
                    </span>
                </div>
                <span class="msg-box n-right" for="c-video_url"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-video_url"></ul>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Has_specs')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                <label>
                    <input type="radio" name="row[has_specs]" value="0" {if $row.has_specs==0}checked{/if}> 否
                </label>
                <label>
                    <input type="radio" name="row[has_specs]" value="1" {if $row.has_specs==1}checked{/if}> 是
                </label>
            </div>
        </div>
    </div>

    <!-- 规格部分 -->
    <div class="form-group" id="specifications" style="{if $row.has_specs==1}display:block{else}display:none{/if}">
        <label class="control-label col-xs-12 col-sm-2">规格:</label>
        <div class="col-xs-12 col-sm-8">
            <table class="table" id="spec-table">
                <thead>
                <tr>
                    <th>规格名</th>
                    <th>价格</th>
                    <th>库存</th>
                    <th>销量</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {foreach $specs as $index => $spec}
                <tr>
                    <td><input type="text" name="row[spec][{$index}][spec_name]" class="form-control" value="{$spec.spec_name|htmlentities}"></td>
                    <td><input type="number" step="0.01" name="row[spec][{$index}][price]" class="form-control" value="{$spec.price|htmlentities}"></td>
                    <td><input type="number" name="row[spec][{$index}][stock]" class="form-control" value="{$spec.stock|htmlentities}"></td>
                    <td><input type="number" name="row[spec][{$index}][sales]" class="form-control" value="{$spec.sales|htmlentities}"></td>
                    <td><button type="button" class="btn btn-danger remove-spec">−</button></td>
                </tr>
                {/foreach}
                </tbody>
            </table>
            <button type="button" id="add-spec" class="btn btn-primary">+</button>
        </div>
    </div>

    <!-- 基础信息部分 -->
    <div class="form-group" id="basic-info">
        <label class="control-label col-xs-12 col-sm-2">{:__('Price')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-price" class="form-control" step="0.01" name="row[price]" type="number" value="{$row.price|htmlentities}">
        </div>
    </div>

    <div class="form-group" id="basic-stock">
        <label class="control-label col-xs-12 col-sm-2">{:__('Stock')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-stock" class="form-control" name="row[stock]" type="number" value="{$row.stock|htmlentities}">
        </div>
    </div>

    <div class="form-group" id="basic-sales">
        <label class="control-label col-xs-12 col-sm-2">{:__('Sales')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-sales" class="form-control" name="row[sales]" type="number" value="{$row.sales|htmlentities}">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Description')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-description" class="form-control editor" rows="5" name="row[description]" cols="50"> {$row.description|htmlentities}</textarea>
        </div>
    </div>
    <div class="form-group" id="basic-weigh">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weigh" class="form-control" name="row[weigh]" type="number" value="{$row.weigh|htmlentities}">
        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 页面加载时根据是否有规格来显示或隐藏基础信息
        const hasSpecsValue = document.querySelector('input[name="row[has_specs]"]:checked').value;
        toggleBasicInfo(hasSpecsValue);

        // 监听单选按钮变化事件
        document.querySelectorAll('input[name="row[has_specs]"]').forEach(function(element) {
            element.addEventListener('change', function() {
                toggleBasicInfo(this.value);
            });
        });

        function toggleBasicInfo(hasSpecs) {
            const specificationsDiv = document.getElementById('specifications');
            const basicInfoDiv = document.getElementById('basic-info');
            const basicStockDiv = document.getElementById('basic-stock');
            const basicSalesDiv = document.getElementById('basic-sales');

            if (hasSpecs == '1') {
                specificationsDiv.style.display = 'block'; // 显示规格区域
                basicInfoDiv.style.display = 'none'; // 隐藏基础价格输入区域
                basicStockDiv.style.display = 'none'; // 隐藏基础库存输入区域
                basicSalesDiv.style.display = 'none'; // 隐藏基础销量输入区域
            } else {
                specificationsDiv.style.display = 'none'; // 隐藏规格区域
                basicInfoDiv.style.display = 'block'; // 显示基础价格输入区域
                basicStockDiv.style.display = 'block'; // 显示基础库存输入区域
                basicSalesDiv.style.display = 'block'; // 显示基础销量输入区域
            }
        }
    });

    // 动态添加和删除规格行
    let specCount = {$specCount}; // 假设初始规格数量
    document.getElementById('add-spec').addEventListener('click', function() {
        const table = document.getElementById('spec-table').getElementsByTagName('tbody')[0];
        const newRow = table.insertRow();
        newRow.innerHTML = `
            <td><input type="text" name="row[spec][${specCount}][spec_name]" class="form-control"></td>
            <td><input type="number" step="0.01" name="row[spec][${specCount}][price]" class="form-control"></td>
            <td><input type="number" name="row[spec][${specCount}][stock]" class="form-control"></td>
            <td><input type="number" name="row[spec][${specCount}][sales]" class="form-control"></td>
            <td><button type="button" class="btn btn-danger remove-spec">−</button></td>
        `;
        specCount++;
    });

    document.getElementById('spec-table').addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-spec')) {
            const row = e.target.closest('tr');
            if (row) {
                row.parentNode.removeChild(row);
            }
        }
    });
</script>
